/**
 * Created by hejg on 2018/5/7.
 */
import React, {Component} from 'react';
import {
    ScrollView,
    View,
    StyleSheet,
    Text,
    Button,
    TouchableOpacity,
    StatusBar, Platform
} from 'react-native';
import {observable, computed, action} from 'mobx';
import {observer} from 'mobx-react/native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Entypo from 'react-native-vector-icons/Entypo';
import Feather from 'react-native-vector-icons/Feather';
import Header from '../../components/Header';
import Style from '../../components/Style';
import PortionPartStore from './store/PortionPartStore';
import ProgressPartStore from './store/ProgressPartStore';
import RankedPartStore from './store/RankedPartStore';
import PortionPart from './components/PortionPart';
import ProgressPart from './components/ProgressPart';
import RankedPart from './components/RankedPart';

@observer
export default class IndexScreen extends Component {
    @observable
    selectTabId = 'PortionPart';//已被选择Tab的TabId值,默认选中‘份额’
    @action
    changeSelectTabId = (tabId) => {//变更当前选择的Tab选项卡
        this.selectTabId = tabId;
    }


    static navigationOptions = {
        tabBarLabel: '指标',
        tabBarIcon: ({focused, tintColor}) => {
            return <Feather name={`bar-chart-2${focused ? '' : ''}`} size={20} color={Style.color.green}/>;
        },
    };

    constructor(props) {
        super(props);
        this.portionPartStore = new PortionPartStore();
        this.progressPartStore = new ProgressPartStore();
        this.rankedPartStore = new RankedPartStore();
    }

    componentDidMount() {
        this._navListener = this.props.navigation.addListener('didFocus', () => {
            Platform.OS === 'android' && StatusBar.setBackgroundColor(Style.color.blue);
        });
    }

    componentWillUnmount() {
        this._navListener.remove();
    }

    _touchTabItem(tabId) {
        this.changeSelectTabId(tabId);
    }

    render() {
        let MainPartNode = null;
        switch (this.selectTabId) {
            case 'PortionPart':
                MainPartNode = <PortionPart store={this.portionPartStore}/>;
                break;
            case 'ProgressPart':
                MainPartNode = <ProgressPart store={this.progressPartStore}/>;
                break;
            case 'RankedPart':
                MainPartNode = <RankedPart store={this.rankedPartStore}/>
                break;
        }
        return (
            <View style={styles.container}>
                <Header headerTitle="重点业务指标" headerLeft={<View/>} headerRight={<View style={{flexDirection:'row', alignItems:'center'}}>
                    <Entypo name={'location-pin'} size={15} color={Style.color.white}/>
                    <Text style={{color:Style.color.white,fontSize:Style.fontSize.middle}}>全省</Text>
                </View>}/>
                <View style={{flex:1}}>
                    <View style={styles.tabBarView}>
                        <TabBarItem tabId="PortionPart" title="份额" icon="pie-chart"
                                    selectedTab={this.selectTabId}
                                    onPress={(tabId)=>this._touchTabItem(tabId)}/>
                        <TabBarItem tabId="ProgressPart" title="进度" icon="align-left"
                                    selectedTab={this.selectTabId}
                                    onPress={(tabId)=>this._touchTabItem(tabId)}/>
                        <TabBarItem tabId="RankedPart" title="排名" icon="trophy"
                                    selectedTab={this.selectTabId}
                                    onPress={(tabId)=>this._touchTabItem(tabId)}/>
                    </View>
                    {MainPartNode}
                </View>
            </View>
        );
    }
}

class TabBarItem extends Component {
    _touchItem(tabId) {
        this.props.onPress(tabId);
    }

    render() {
        return (
            <TouchableOpacity onPress={() => this._touchItem(this.props.tabId)}
                              style={[styles.tabItemView,{borderColor:this.props.selectedTab === this.props.tabId ? Style.color.blue : Style.color.white}]}>
                <Text
                    style={[styles.tabItemTitle,{color:this.props.selectedTab === this.props.tabId ? Style.color.blue : Style.color.black}]}>{this.props.title}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1, backgroundColor: Style.color.screen
    },
    tabBarView: {
        flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', backgroundColor: Style.color.white,
        borderBottomWidth:1,borderColor:Style.color.gray,borderStyle:'dotted',
    },
    tabItemView: {
        flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingVertical: 10, borderBottomWidth:1
    },
    tabItemTitle: {
        fontSize: Style.fontSize.normal, fontWeight: 'bold', marginHorizontal: 5
    }
});